<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>相册详情-<?php echo $gallery->title ?></title>
    <link rel="stylesheet" type="text/css" href="<?php echo assets('css/style.css') ?>">
</head>
<body>
<div id="header">
    <div id="logo">Gallery</div>
    <ul>
        <li><a href="javascript:;"><?php echo $user->userName ?></a></li>
        <li><a href="<?php echo url('gallery/create') ?>">新建相册</a></li>
    </ul>
</div>
<div id="content">
    <div id="wrapper">
        <div>
            <a href="<?php echo url('index') ?>">首页</a>
            -
            <span><?php echo $gallery->title ?> - </span>
            <span><?php echo $gallery->description ?></span>
        </div>
        <ul>
            <?php foreach ($gallery->imageCollection as $image): ?>
                <li>
                    <img style="width: 300px; height: 290px;" src="<?php echo assets($image->path) ?>"
                         title="<?php echo $image->title ?>"/>
                    <div style="width:300px; height: 0px;top:-5px; overflow: hidden;">
                        <a href="<?php echo url('image/edit', ['g' => $gallery->id, 'm' => $image->id]) ?>">编辑</a>
                        <a href="<?php echo url('image/delete', ['g' => $gallery->id, 'm' => $image->id]) ?>">删除</a>
                    </div>
                </li>
            <?php endforeach; ?>
        </ul>
    </div>
</div>
<div id="footer">
    @copyright wanczy-php06 use for PHP OOP demo
</div>
<script type="text/javascript" src="<?php echo assets('js/jquery-1.11.3.min.js') ?>"></script>
<script type="text/javascript">
    $('#wrapper ul li').on('mouseenter', function (e) {
        // li 元素的鼠标经过事件
        $(e.delegateTarget).find('div').animate({
            height: '60px',
            top: '-65px'
        }, 200);
    }).on('mouseleave', function (e) {
        $(e.delegateTarget).find('div').animate({
            height: '0px',
            top: '-5px'
        }, 200);
    });
</script>
</body>
</html>